.burger {
  display: none;
  width: 70px;
  height: 70px; 
  z-index: 50;

  background-color: transparent;
  border: none;

  outline: none;
  }

  .burger-content{
    position: fixed;
    top: 30rem;
    left: 20rem;
    width: 75rem;
    height: 75rem;
  }

  .burger-line {
    position: relative;
    z-index: 40;
    display: block;
    width: 40px;
    height: 4px;
    background-color: #141414;
    margin-bottom: 10px;
    transition: all 0.3s;
    transform-origin: 0% 50%;
  }


  .burger.active .burger-line:nth-child(1) {
    transform-origin: 0% 50%;
    transform: rotate(45deg);
    background-color: white;
  }

  .burger.active .burger-line:nth-child(2) {
    opacity: 0;
  }

  .burger.active .burger-line:nth-child(3) {
    transform-origin: 0% 50%;
    transform: rotate(-45deg);
    background-color: white;
  }


@media screen and (max-width: 719px){

  html{

    font-size: 0.26666666666vw;  }

    .burger {
      display: block;
    }

    .site-header-wrapper{
      position: fixed;
    }
    .meg-hov-contain{
      display: none;
    }

    .mega-menu{
      width: 100%;
    }
      .logo{
        text-align: center;
      }
      .logo img{
        width: 60%;
        height: auto;
        margin: 0;
      }
    .nav-responsive{
       margin: 0;
       display: block;

        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;
        padding-top: 100px;
        background-color: rgba(0, 0, 0, 0.9);
 
        opacity: 0;
        transition: 0.5s;
        transform: translateY(-100%);  

        flex-direction: column;
        justify-content: flex-start;
      }

        .nav-responsive.active{  
            position: fixed;    
            opacity: 1;
            transform: translateY(0%);
            background-color: #42e3cb;

            }


              .nav-responsive a{
                display: block;
                font-family: 'Barlow Semi Condensed', sans-serif;
                padding-left: 30rem;
                font-weight: 700;
                font-size: 40rem;
                line-height: 60rem;

                color: white;

              }

      .icons-nav-item{
        margin-right: 25rem;
      }

    .section-contain{
      width: 100%;
      display: flex;

      }


         .header-titre1{
            font-size: 60rem;
            text-align: initial;
            margin-left: 20rem;

          }


      .header-band-txt{
        margin-top: 150rem;
        width: 100%;
        color: #141414;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .txt-header{
        display: none;
      }
        .header-pictures1{
          display: none;
        }
        .header-pictures2{
          display: none;
        }



    .collection-contain{
      width: 100%;

    }

      .collection-titre{
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;

      }

      .slick-list{
        width: 306rem;
       margin-left: 45rem;

         }

        .h2-collection{
          margin-top: 30rem;
        }

        .collection-section {
          display: flex;
          flex-direction: column;
           margin-top: 75rem;
           margin-bottom: 75rem;
        }

        .collection-back{
          width: 100%;
          margin-bottom: 20rem;
        }

          .collection-back:after{
            left: 0;
          }
          .slider-content {
              width: 100%;
              overflow: hidden;
              margin-top: 130rem;
              margin-bottom: 130rem;
          }

            .slide-picture-content{
              width: 269rem;
              background-color: white;
            }

      .braindead-contain{
        margin-top: 75rem;
        height: 680rem;
       }
         .braindead-txt-bloc{
          margin-top: 130rem;
         }
                .braindead-txt{
                  font-size: 57rem;
                }

                .serene-typo{
                  font-size: 37rem;
                }


      .eco-section{
        width: 100%;
        height: auto;
        padding-top: 100rem;
        display: flex;
        flex-direction: column;
        align-items: center;
       }

        .eco-bloc1{
          width: 100%;
          padding-top:0;
          }

          .eco-bloc1 h3 {
              font-size: 122rem;
              margin-left: 20rem;
          }

          .eco-bloc-picture{
            width: 100%;
            left: 0rem;
          }

        .eco-bloc2{
          width: 90%;
          position: relative;
          top: 0;
          left: 0;
          margin-top: 20rem;
         }

          .eco-bloc2 img {
                width: 100%;
                height: 100%;
            }

        .eco-bloc3{
          position: relative;
          width: 335rem;
          padding-top: 0;
          top: 0;
          }

          .picto-eco img{
            margin-left: 235rem;
          }

        .eco-bloc4{
          position: relative;
          width: 335rem;
          top: 25rem;
         }

          .custom-4{
            font-size: 56rem;
            margin-bottom: 10rem;
          }
          .picto-eco-2{
            width: 122rem;
            height: auto;
            margin: auto;
          }
          .picto-eco-2 img{
            width: 100%;
            position: relative;
          }

        .eco-bloc5{
          position: relative;
          width: 335rem;
          top: 0;
          padding-top: 0;
         }
          .color-bloc-picture{
            width: 100%;
            top: 100rem;
            left: 0;
          }
            .custom-5{
              margin-top: 150rem;
            }

          .btn-black{
            margin: 75rem 0 65rem 0;
          }


          .lastest-news{
            height: auto;
            }

            .news-contain{
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
             }
              .news-titre{
                width: 100%;
                justify-content: center;
                background-position: 50%;
              }

                .news-bloc-contain{
                  flex-direction: column;
                  align-items: center;
                }

                .back-news{
                  width: 100%;
                  margin-bottom: 55rem;
                }

                .bloc-news{
                  width: 313rem;
                }
                  .bloc-news img{
                    width: 100%;
                  }

          .this-is-us{
            width: 100%;
            padding-top: 0;
            height: auto;

            }

            .content-picture{
                  display: flex;
                  flex-direction: column;
                  align-items: center;
            }
            .content-picture div:nth-child(n+4){
              display: none;
            }

            .social-titre{
              width: 100%;
            }

          footer{
            height: auto;
          }
            .footer-contain{
              position: relative;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-around;
              }

              .footer-column.picture{
                width: 100%;
                height: auto;
                margin: 20rem auto;
              }
                .logo-footer{
                  width: 50%;
                }

              .footer-column.item{
                width: 150rem;
              }

                .social-media {
                    position: absolute;
                    width: 100%;
                    top: 300px;
                    left: 0;
                    text-align: center;
                }

                .icon-social-media{
                  width: 100%;
                  justify-content: center;
                }

                  .icon-social-media a {
                    margin-left: 15rem;
                  }

                .footer-column.v2{
                    width: 150rem;
                  }
                 .footer-column.v3{
                    width: 335rem;
                  }

                    .footer-column.v3 p{
                      width: 100%;
                    }
                      .form-newsletter-field{
                        width: 273rem;
                      }



  /* TYPO */

  h1{

    font-size: 76rem;
    text-align: center;
  }

  p{
    font-size: 12rem;
  }
}